<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-29 19:04:54
-->
<template>
  <div>
    <ItemCard title="今日销售额" :number="salesToday">
      <template #center>
        <div>
          <span>日同比</span>
          <span class="salesGrowthLast">{{ salesGrowthLastDay }}%</span>
          <span :class="salesGrowthLastDay > 0 ? 'up' : 'down'"></span>
        </div>
        <div style="margin: 5px 0">
          <span>月同比</span>
          <span class="salesGrowthLast">{{ salesGrowthLastMonth }}%</span>
          <span :class="salesGrowthLastMonth > 0 ? 'up' : 'down'"></span>
        </div>
      </template>
      <template #bottom>
        <div style="font-size: 12px; margin: 5px 0">
          昨日销售额
          <span style="margin-left: 3px">￥{{ salesLastDay }}</span>
        </div>
      </template>
    </ItemCard>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEchartsStore } from '@/stores/echarts'
const echartsStore = useEchartsStore()

const salesToday = computed(() => {
  return echartsStore.echartsData.salesToday
})
const salesLastDay = computed(() => {
  return echartsStore.echartsData.salesLastDay
})
const salesGrowthLastDay = computed(() => {
  return echartsStore.echartsData.salesGrowthLastDay
})
const salesGrowthLastMonth = computed(() => {
  return echartsStore.echartsData.salesGrowthLastMonth
})
</script>

<script lang="ts">
export default {
  name: 'TodaySale',
}
</script>

<style lang="scss" scoped>
.salesGrowthLast {
  padding: 5px;
}
.up {
  border: 5px solid transparent;
  border-bottom: 5px solid red;
  position: relative;
  top: -8px;
}
.down {
  border: 5px solid transparent;
  border-top: 5px solid green;
  position: relative;
  bottom: -8px;
}
</style>
